<template>
	<view class="main">
		<u-navbar :is-back="true" title="用户评价" :background="background" back-icon-color="#000000" title-color="#33312D"
			title-bold="true"></u-navbar>
		<view class="whole">
			<view class="info" v-for="(item,index) in evaluation" :key="index">
				<view class="head">
					<image :src="item.head" mode=""></image>
					<text class="name">{{item.nick}}</text>
					<u-rate :count="count" active-color="#FFA200" disabled="true" v-model="item.star"></u-rate>
				</view>
				<view class="contents">
					<text>{{item.content}}</text>
					<view class="shop_img">
						<image :src="item.img" mode=""></image>
					</view>
				</view>
				<view class="content">
					<view class="id">
						订单编号:{{item.orderno}}
					</view>
					<view class="shop_details" v-for="(details,id) in item.good_info" :key="id">
						<view class="left">
							<image :src="details.image" mode=""></image>
							<view class="shop_tit">
								{{details.name}}
								<text>{{details.specs}}</text>
							</view>
						</view>
						<view class="right">
							<view>
								¥{{details.price}}
							</view>
							<text>x{{details.amount}}</text>
							<view class="pays">
								实付: ¥{{item.pay_true}}
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff'
				},
				count: 5,
				evaluation:[],//用户评价列表
			}
		},
		onLoad() {
this.userevaluation()

		},
		mounted() {

		},
		onShow() {},
		methods: {
			//用户评价   /shopapi/user/evaluationList
			userevaluation(){
				global.$http.request({
					url:'/shopapi/user/evaluationList',
					data:{
						token:uni.getStorageSync('token')
					}
				}).then(res=>{
					if(res.data.code==200){
						console.log(res.data.data);
						this.evaluation=res.data.data
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		font-family: PingFang SC;
		width: 750rpx;
		margin: 0 auto;
		background-color: #f7f7f7;

		.main {
			width: 750rpx;
			margin: 0 auto;

			.whole {
				.info {
					padding: 20rpx;
					background-color: #fff;
					margin-bottom: 4rpx;

					.head {
						display: flex;
						align-items: center;

						
						.name {
							padding: 0 26rpx 0 17rpx;
						}

						image {
							width: 80rpx;
							height: 80rpx;
								border-radius: 100%;
						}
					}

					.contents {
						padding-left: 97rpx;
						text {
							font-size: 24rpx;
							font-weight: 400;
							color: #4D4D4D;
						}

						.shop_img {
							padding: 20rpx 0;

							image {
								width: 114rpx;
								height: 114rpx;
							}
						}
					}

					.content {
						padding: 16rpx;
						background: #F8F8F8;

						.id {
							font-size: 20rpx;
							font-weight: 400;
							color: #4D4D4D;
						}

						.shop_details {
							padding-top: 20rpx;
							display: flex;
							justify-content: space-between;

							image {
								width: 114rpx;
								height: 114rpx;
							}

							.left {
								display: flex;

								.shop_tit {
									width: 370rpx;
									padding-left: 8rpx;
									font-size: 24rpx;
									font-weight: 400;
									color: #000000;
									line-height: 30rpx;

									text {
										display: block;
										font-size: 20rpx;
										font-weight: 400;
										color: #4D4D4D;
										padding-top: 16rpx;
									}
								}

							}

							.right {
								width: 190rpx;
								text-align: right;

								.pays {
									padding-top: 15rpx;
									font-size: 25rpx;
									font-weight: 400;
									color: #000000;
								}

								view {
									font-size: 24rpx;
									font-weight: 400;
									color: #000000;
									line-height: 27rpx;
								}

								text {

									font-size: 20rpx;
									font-weight: 400;
									color: #4D4D4D;
								}
							}
						}
					}

				}

			}
		}
	}
</style>
